<script setup>
import { onMounted, computed, watch, nextTick } from 'vue'
import { useThemeStore } from '@/stores/theme'
import { darkTheme, useOsTheme } from 'naive-ui'
import { NConfigProvider, NDialogProvider, NMessageProvider } from 'naive-ui'

const themeStore = useThemeStore()

// 计算主题配置
const themeOverrides = computed(() => ({
  common: {
    primaryColor: themeStore.primaryColor,
    primaryColorHover: themeStore.primaryHover,
    primaryColorPressed: themeStore.primaryActive,
    primaryColorSuppl: themeStore.primaryBg,
    borderRadius: '4px',
    borderColor: 'var(--border-color)',
    textColor1: 'var(--text-color)',
    textColor2: 'var(--text-color-secondary)',
  },
  Button: {
    textColor: 'var(--text-color)',
    textColorPrimary: '#fff',
    textColorHover: 'var(--primary-color)',
    textColorPressed: 'var(--primary-active)',
    textColorFocus: 'var(--primary-color)',
    borderHover: 'var(--primary-color)',
    borderPressed: 'var(--primary-active)',
    borderFocus: 'var(--primary-color)',
    rippleColor: 'var(--primary-color)',
    colorPrimary: themeStore.primaryColor,
    colorHoverPrimary: themeStore.primaryHover,
    colorPressedPrimary: themeStore.primaryActive,
    colorFocusPrimary: themeStore.primaryHover,
    colorDisabled: '#ccc',
    borderColorDisabled: '#ddd',
    rippleColorPrimary: 'rgba(255, 255, 255, 0.2)',
  },
  Input: {
    color: 'var(--bg-container)',
    colorFocus: 'var(--bg-container)',
    colorHover: 'var(--bg-container)',
    borderHover: themeStore.primaryHover,
    borderFocus: themeStore.primaryColor,
    boxShadowFocus: `0 0 0 2px ${themeStore.primaryBg}`,
  },
  Select: {
    peers: {
      InternalSelection: {
        textColor: 'var(--text-color)',
        borderHover: themeStore.primaryHover,
        borderFocus: themeStore.primaryColor,
        boxShadowFocus: `0 0 0 2px ${themeStore.primaryBg}`,
      }
    }
  },
  Dropdown: {
    color: 'var(--bg-container)',
    optionColorHover: themeStore.primaryBg,
    optionTextColorHover: themeStore.primaryColor,
    optionColorActive: themeStore.primaryBg,
    optionTextColorActive: themeStore.primaryColor,
  },
  Menu: {
    itemTextColor: 'var(--text-color)',
    itemTextColorHover: themeStore.primaryColor,
    itemTextColorActive: themeStore.primaryColor,
    itemColorHover: themeStore.primaryBg,
    itemColorActive: themeStore.primaryBg,
    itemColorActiveHover: themeStore.primaryBg,
    arrowColor: 'var(--text-color-secondary)',
  },
  Tabs: {
    tabTextColorActive: themeStore.primaryColor,
    tabTextColorHover: themeStore.primaryHover,
    barColor: themeStore.primaryColor,
  },
  Switch: {
    railColorActive: themeStore.primaryColor,
    boxShadowFocus: `0 0 0 2px ${themeStore.primaryBg}`,
  },
  Checkbox: {
    checkMarkColor: '#fff',
    colorChecked: themeStore.primaryColor,
    colorHover: themeStore.primaryHover,
    colorFocus: themeStore.primaryHover,
    borderFocus: themeStore.primaryColor,
    boxShadowFocus: `0 0 0 2px ${themeStore.primaryBg}`,
  },
  Radio: {
    buttonTextColor: 'var(--text-color)',
    buttonTextColorActive: themeStore.primaryColor,
    dotColorActive: themeStore.primaryColor,
    buttonBorderColor: 'var(--border-color)',
    buttonBorderColorActive: themeStore.primaryColor,
    buttonColorActive: themeStore.primaryBg,
    boxShadowFocus: `0 0 0 2px ${themeStore.primaryBg}`,
  },
  Pagination: {
    itemTextColor: 'var(--text-color)',
    itemTextColorHover: themeStore.primaryColor,
    itemTextColorActive: '#fff',
    itemColorHover: themeStore.primaryBg,
    itemColorActive: themeStore.primaryColor,
    itemBorderActive: themeStore.primaryColor,
  },
  DataTable: {
    thColor: 'var(--bg-container)',
    thTextColor: 'var(--text-color)',
    tdColor: 'var(--bg-container)',
    tdTextColor: 'var(--text-color)',
    borderColor: 'var(--border-color)',
    tdColorHover: themeStore.primaryBg,
    thColorHover: themeStore.primaryBg,
  },
  Dialog: {
    color: 'var(--bg-container)',
    textColor: 'var(--text-color)',
  },
  Card: {
    color: 'var(--bg-container)',
    textColor: 'var(--text-color)',
    borderColor: 'var(--border-color)',
  },
  Popover: {
    color: 'var(--bg-container)',
    textColor: 'var(--text-color)',
    borderColor: 'var(--border-color)',
  },
  Tag: {
    borderColor: 'var(--border-color)',
    textColor: 'var(--text-color)',
  }
}))

// 监听主题色变化
watch(
  () => [
    themeStore.primaryColor,
    themeStore.primaryHover,
    themeStore.primaryActive,
    themeStore.primaryBg
  ],
  () => {
    // 强制更新主题
    nextTick(() => {
      const root = document.documentElement
      root.style.setProperty('--primary-color', themeStore.primaryColor)
      root.style.setProperty('--primary-hover', themeStore.primaryHover)
      root.style.setProperty('--primary-active', themeStore.primaryActive)
      root.style.setProperty('--primary-bg', themeStore.primaryBg)
    })
  },
  { immediate: true }
)

// 在应用启动时应用主题设置
onMounted(() => {
  themeStore.applySettings()
})
</script>

<template>
  <n-config-provider 
    :theme="themeStore.darkMode ? darkTheme : null" 
    :theme-overrides="themeOverrides"
    :size="themeStore.componentSize"
  >
    <n-dialog-provider>
      <n-message-provider>
        <div class="app-container">
          <router-view v-slot="{ Component }">
            <transition name="fade-transform" mode="out-in">
              <component :is="Component" />
            </transition>
          </router-view>
        </div>
      </n-message-provider>
    </n-dialog-provider>
  </n-config-provider>
</template>

<style lang="scss">
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

#app {
  height: 100%;
  font-family: var(--font-family);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:root {
  /* 亮色模式变量 */
  --primary-color: #1890ff;
  --primary-hover: #40a9ff;
  --primary-active: #096dd9;
  --primary-bg: #e6f4ff;
  --tag-bg: #f0f0f0;
  --tag-color: #666;
  --tag-active-bg: var(--primary-bg);
  --tag-active-color: var(--primary-color);
  --tag-hover-bg: #e0e0e0;
  --tag-border: #d9d9d9;
  --bg-color: #f7f9fb;
  --bg-container: #ffffff;
  --bg-hover: #f4f4f5;
  --bg-active: #e6f4ff;
  --text-color: #1f2937;
  --text-color-secondary: #6b7280;
  --border-color: #e5e7eb;
  --shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* 深色模式变量 */
.dark {
  --primary-color: #1890ff;
  --primary-hover: #40a9ff;
  --primary-active: #096dd9;
  --primary-bg: #111b26;
  --tag-bg: #1e1e20;
  --tag-color: #e5eaf3;
  --tag-active-bg: var(--primary-bg);
  --tag-active-color: var(--primary-color);
  --tag-hover-bg: #27272a;
  --tag-border: #27272a;
  --bg-color: #18181c;
  --bg-container: #1e1e20;
  --bg-hover: #27272a;
  --bg-active: #0c2544;
  --text-color: #e5eaf3;
  --text-color-secondary: #9ca3af;
  --border-color: #27272a;
  --shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
}

/* 深色模式样式 */
.dark {

  .navbar,
  .sidebar,
  .tags-view-container,
  .main-container,
  .n-card,
  .n-menu,
  .n-tabs,
  .n-form,
  .n-input,
  .n-button,
  .n-dropdown-menu,
  .n-select-menu,
  .n-date-picker,
  .n-modal,
  .n-drawer,
  .n-popover,
  .n-pagination,
  .contextmenu {
    background-color: var(--bg-container) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
  }

  .n-input-wrapper,
  .n-button:not(.n-button--primary-type),
  .n-select-menu .n-base-select-option,
  .n-dropdown-menu .n-dropdown-option {
    background-color: var(--bg-container) !important;
  }

  .n-input:hover .n-input__border,
  .n-input:hover .n-input__state-border {
    border-color: var(--primary-color) !important;
  }

  .n-button:not(.n-button--primary-type):hover,
  .n-select-menu .n-base-select-option:hover,
  .n-dropdown-menu .n-dropdown-option:hover,
  .n-menu-item:not(.n-menu-item--disabled):hover {
    /* background-color: var(--bg-hover) !important; */
  }

  .n-menu-item-content--selected,
  .n-tabs-tab--active,
  .n-dropdown-option--selected {
    /* background-color: var(--bg-active) !important; */
    color: var(--primary-color) !important;
  }

  .n-tabs-tab:hover {
    color: var(--primary-color) !important;
  }

  .n-tabs-bar {
    background-color: var(--primary-color) !important;
  }

  .tags-view-item {
    background-color: var(--bg-container);
    border-color: var(--border-color);
    color: var(--text-color);

    &:hover {
      background-color: var(--bg-hover);
    }

    &.active {
      background-color: var(--bg-active);
      border-color: var(--primary-color);
      color: var(--primary-color);
    }
  }

  .logo {
    border-color: var(--border-color);

    span {
      color: var(--text-color);
    }
  }

  .n-divider {
    color: var(--text-color-secondary) !important;
  }
 
  .n-data-table {
    .n-data-table-tr {
      background-color: var(--bg-container) !important;

      &:hover {
        background-color: var(--bg-hover) !important;
      }
    }

    .n-data-table-th {
      background-color: var(--bg-container) !important;
      border-color: var(--border-color) !important;
    }

    .n-data-table-td {
      border-color: var(--border-color) !important;
    }
  }

  // 滚动条样式
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  ::-webkit-scrollbar-track {
    background: var(--bg-container);
  }

  ::-webkit-scrollbar-thumb {
    background: #4a4a4a;
    border-radius: 3px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #5a5a5a;
  }
}

/* 基础样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--bg-color);
  color: var(--text-color);
}


[data-nav-mode='sidebar'] .nav-container {
  width: fit-content;
  background: inherit;
  border-right: 1px solid #eee;
  overflow-y: auto;
  z-index: 100;
}

[data-nav-mode='mix'] .navbar {
  flex-direction: column;
  height: auto;
  padding: 0;
}

[data-nav-mode='mix'] .nav-container {
  width: 100%;
  padding: 0 20px;
  border-top: 1px solid #eee;
}

.dark [data-nav-mode='sidebar'] .nav-container {
  border-right-color: #333;
}

.dark [data-nav-mode='mix'] .nav-container {
  border-top-color: #333;
}

/* 动画相关样式 */
[data-animation='fade'] .fade-transform-enter-active,
[data-animation='fade'] .fade-transform-leave-active {
  transition: opacity 0.3s ease;
}

[data-animation='fade'] .fade-transform-enter-from,
[data-animation='fade'] .fade-transform-leave-to {
  opacity: 0;
}

[data-animation='slide'] .fade-transform-enter-active,
[data-animation='slide'] .fade-transform-leave-active {
  transition: transform 0.3s ease;
}

[data-animation='slide'] .fade-transform-enter-from {
  transform: translateX(-30px);
}

[data-animation='slide'] .fade-transform-leave-to {
  transform: translateX(30px);
}

[data-animation='zoom'] .fade-transform-enter-active,
[data-animation='zoom'] .fade-transform-leave-active {
  transition: transform 0.3s ease;
}

[data-animation='zoom'] .fade-transform-enter-from {
  transform: scale(0.9);
}

[data-animation='zoom'] .fade-transform-leave-to {
  transform: scale(1.1);
}

/* 组件尺寸样式 */
[data-size='small'] {
  font-size: 12px;
}

[data-size='medium'] {
  font-size: 14px;
}

[data-size='large'] {
  font-size: 16px;
}

.app-container {
  height: 100vh;
  background-color: var(--bg-color);
}

/* 过渡动画样式 */
.fade-transform-enter-active,
.fade-transform-leave-active {
  transition: all 0.3s;
}

.fade-transform-enter-from {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* 标签页样式 */
.tags-view-container {
  height: 34px;
  width: 100%;
  background: var(--bg-container);
  border-bottom: 1px solid var(--border-color);
  box-shadow: var(--shadow);
}

.tags-view-wrapper .tags-view-item {
  display: inline-block;
  position: relative;
  cursor: pointer;
  height: 26px;
  line-height: 26px;
  border: 1px solid var(--tag-border);
  color: var(--tag-color);
  background: var(--tag-bg);
  padding: 0 8px;
  font-size: 12px;
  margin-left: 5px;
  margin-top: 4px;
  text-decoration: none;
  transition: all 0.2s ease;

  &:hover {
    background-color: var(--tag-hover-bg);
    color: var(--primary-color);
    border-color: var(--primary-color);
  }

  &.active {
    background-color: var(--tag-active-bg);
    color: var(--tag-active-color);
    border-color: var(--primary-color);

    &::before {
      content: '';
      background: var(--primary-color);
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      position: relative;
      margin-right: 4px;
    }
  }

  .el-icon-close {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    border-radius: 50%;
    text-align: center;
    transition: all 0.3s;
    transform-origin: 100% 50%;
    margin-left: 4px;
    color: var(--tag-color);

    &:hover {
      background-color: var(--primary-color);
      color: #fff;
    }
  }
}

/* 按钮样式 */
.n-button--primary-type {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;

  &:hover {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
  }

  &:active {
    background-color: var(--primary-active) !important;
    border-color: var(--primary-active) !important;
  }
}

/* 菜单选中状态 */
.n-menu-item-content--selected {
  color: var(--primary-color) !important;
  background-color: var(--primary-bg) !important;
}

/* 表格相关 */
.n-data-table .n-data-table-tr:hover {
  background-color: var(--primary-bg) !important;
}

/* 分页器 */
.n-pagination .n-pagination-item--active {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

/* 输入框焦点状态 */
.n-input:focus-within .n-input__border,
.n-input:focus-within .n-input__state-border {
  border-color: var(--primary-color) !important;
}

/* 选择器选中状态 */
.n-select-menu .n-base-select-option--selected {
  color: var(--primary-color) !important;
  background-color: var(--primary-bg) !important;
}

/* 标签页 */
.n-tabs-tab--active {
  color: var(--primary-color) !important;
}

.n-tabs-bar {
  background-color: var(--primary-color) !important;
}

/* 链接颜色 */
a {
  color: var(--primary-color);

  &:hover {
    color: var(--primary-hover);
  }

  &:active {
    color: var(--primary-active);
  }
}

.sidebar-collapsed {
  .n-menu-item-content__icon {
      position: relative !important;
      left: 20px !important;
    }
}
.profile-wrapper .profile-container .content-card .n-tab-pane .n-form .n-form-item .n-input .n-input__input-el{
  padding: 0 !important;
}
</style>
